<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ taglib uri="http://java.sun.com/jsp/jstl/core"  prefix="c"%> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <meta charset="UTF-8">
        <title>欢迎页面-X-admin2.0</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
        <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
        <link rel="stylesheet" href="./css/font.css">
        <link rel="stylesheet" href="./css/xadmin.css">
        <script type="text/javascript" src="../js/jquery-1.12.4.js"></script>
        <script type="text/javascript"  src="js/echarts.min.js"></script>
    </head>
    <body>
    <div class="x-body layui-anim layui-anim-up">
        <fieldset class="layui-elem-field">
            <legend>数据统计</legend>
            <div class="layui-field-box">
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-body">
                            <div class="layui-carousel x-admin-carousel x-admin-backlog" lay-anim="" lay-indicator="inside" lay-arrow="none" style="width: 100%; height: 90px;">
                                <div carousel-item="">
                                    <ul class="layui-row layui-col-space10 layui-this">
                                        <li class="layui-col-xs4">
                                            <a href="audit_undetermined.html" class="x-admin-backlog-body">
                                                <h3>待办案件</h3>
                                                <p>
                                                    <cite>${num3}</cite></p>
                                            </a>
                                        </li>
                                        <li class="layui-col-xs4">
                                            <a href="audit_finish.html" class="x-admin-backlog-body">
                                                <h3>确审案件</h3>
                                                <p>
                                                    <cite>${num1}</cite></p>
                                            </a>
                                        </li>
                                        <li class="layui-col-xs4">
                                            <a href="audit_return.html" class="x-admin-backlog-body">
                                                <h3>复审案件</h3>
                                                <p>
                                                    <cite>${num2}</cite></p>
                                            </a>
                                        </li>
                                        
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </fieldset>
         <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="main" style="width:1100px;height:400px;"></div>
         </div>
       <script type="text/javascript">
       var myChart = echarts.init(document.getElementById('main'));
       var app = {};
       option = {
    		    title: {
    		        text: '动态数据',
    		        subtext: ''
    		    },
    		    tooltip: {
    		        trigger: 'axis',
    		        axisPointer: {
    		            type: 'cross',
    		            label: {
    		                backgroundColor: '#283b56'
    		            }
    		        }
    		    },
    		    legend: {
    		        data:['最新赔付金额', '理赔案件']
    		    },
    		    toolbox: {
    		        show: true,
    		        feature: {
    		            dataView: {readOnly: false},
    		            restore: {},
    		            saveAsImage: {}
    		        }
    		    },
    		    dataZoom: {
    		        show: false,
    		        start: 0,
    		        end: 100
    		    },
    		    xAxis: [
    		        {
    		            type: 'category',
    		            boundaryGap: true,
    		            data: (function (){
    		                var now = new Date();
    		                var res = [];
    		                var len = 10;
    		                while (len--) {
    		                    res.unshift(now.toLocaleTimeString().replace(/^\D*/,''));
    		                    now = new Date(now - 2000);
    		                }
    		                return res;
    		            })()
    		        },
    		        {
    		            type: 'category',
    		            boundaryGap: true,
    		            data: (function (){
    		                var res = [];
    		                var len = 10;
    		                while (len--) {
    		                    res.push(10 - len - 1);
    		                }
    		                return res;
    		            })()
    		        }
    		    ],
    		    yAxis: [
    		        {
    		            type: 'value',
    		            scale: true,
    		            name: '金额',
    		            max: 30,
    		            min: 0,
    		            boundaryGap: [0.2, 0.2]
    		        },
    		        {
    		            type: 'value',
    		            scale: true,
    		            name: '案件数量',
    		            max: 1000,
    		            min: 0,
    		            boundaryGap: [0.2, 0.2]
    		        }
    		    ],
    		    series: [
    		        {
    		            name:'理赔案件',
    		            type:'bar',
    		            xAxisIndex: 1,
    		            yAxisIndex: 1,
    		            data:(function (){
    		                var res = [];
    		                var len = 10;
    		                while (len--) {
    		                    res.push(Math.round(Math.random() * 1000));
    		                }
    		                return res;
    		            })()
    		        },
    		        {
    		            name:'最新赔付金额',
    		            type:'line',
    		            data:(function (){
    		                var res = [];
    		                var len = 0;
    		                while (len < 10) {
    		                    res.push((Math.random()*10 + 5).toFixed(1) - 0);
    		                    len++;
    		                }
    		                return res;
    		            })()
    		        }
    		    ]
    		};

    		app.count = 11;
    		setInterval(function (){
    		    axisData = (new Date()).toLocaleTimeString().replace(/^\D*/,'');

    		    var data0 = option.series[0].data;
    		    var data1 = option.series[1].data;
    		    data0.shift();
    		    data0.push(Math.round(Math.random() * 1000));
    		    data1.shift();
    		    data1.push((Math.random() * 10 + 5).toFixed(1) - 0);

    		    option.xAxis[0].data.shift();
    		    option.xAxis[0].data.push(axisData);
    		    option.xAxis[1].data.shift();
    		    option.xAxis[1].data.push(app.count++);

    		    myChart.setOption(option);
    		}, 2100);
    		 // 3.使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
    			
       </script>
         
         
         
        <script>
        
        
        
        var _hmt = _hmt || [];
        (function() {
          var hm = document.createElement("script");
          hm.src = "https://hm.baidu.com/hm.js?b393d153aeb26b46e9431fabaf0f6190";
          var s = document.getElementsByTagName("script")[0]; 
          s.parentNode.insertBefore(hm, s);
        })();
        </script>
    </body>
</html>